<template>
    <div class="profile-container">
        <div class="head-img-container">
            <div class="head-img-box">
                <img src="../../../img/logo.png" class="head-img">
            </div>
        </div>
        <div class="server-slogn">服务器君是一个变态</div>
        <div class="profile-msg-container">
            <div class="profile-msg-box">
                <div class="profile-msg-line">
                    <div>昵称：</div>
                    <div>{{ message.data.name }}</div>
                </div>
                <div class="little-stick-plus">
                    <div></div>
                </div>
                <div class="profile-msg-line">
                    <div>账户：</div>
                    <div>{{ message.data.email }}</div>
                </div>
                <div class="little-stick-plus">
                    <div></div>
                </div>
                <div class="profile-msg-line">
                    <div>等级：</div>
                    <div style="display: flex">
                        Lev {{ ' ' + message.data.level }}
                        <label-plus style="color:white;" :text="message.data.title"></label-plus>
                    </div>
                </div>
                <div class="little-stick-plus">
                    <div></div>
                </div>
                <div class="profile-msg-line">
                    <div>性别：</div>
                    <div>{{ message.data.gender == 'm' ? '汉子' : '萌娘' }}</div>
                </div>
                <div class="little-stick-plus">
                    <div></div>
                </div>
                <div class="profile-msg-line">
                    <div>生日：</div>
                    <div>{{ message.data.birthday }}</div>
                </div>
                <div class="little-stick-plus">
                    <div></div>
                </div>
                <div class="profile-msg-line">
                    <div>建号时间：</div>
                    <div>{{ message.data.created_at }}</div>
                </div>
            </div>
        </div>

        <div class="profile-msg-container">
            <div class="profile-msg-box">
                <div class="profile-msg-line">
                    <div style="color:#f1929d;">我的评论：</div>
                    <div style="color:#f1929d;"> ></div>
                </div>
            </div>
        </div>

        <div class="profile-msg-container" @click="toFav">
            <div class="profile-msg-box">
                <div class="profile-msg-line">
                    <div style="color:#f1929d;">我的收藏：</div>
                    <div style="color:#f1929d;"> ></div>
                </div>
            </div>
        </div>

        <div class="profile-msg-container">
            <div class="profile-msg-box">
                <div class="profile-msg-line">
                    <div style="color:#f1929d;">修改密码：</div>
                    <div style="color:#f1929d;"> ></div>
                </div>
            </div>
        </div>
        <div style="height: 70px"></div>
    </div>
    <van-overlay v-model:show="showToast">
        <loading-box>转呀转呀转呀转...</loading-box>
    </van-overlay>
</template>

<script>
import {onMounted, reactive, ref} from "vue";
import {_getProfile} from "@/apis/mainPageAPI";
import labelPlus from "@/components/main/part/label";
import router from "@/router";

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "profile",
    components: {
        labelPlus
    },
    setup() {
        let showToast = ref(true)

        let message = reactive({
            data: {
                birthday: '',
                created_at: '',
                email: '',
                exp: '',
                gender: '',
                level: '',
                name: '',
                title: ''
            }

        })

        async function getProfile() {
            showToast.value = true
            await _getProfile('',res => {
                message.data = res.data.data.user
                showToast.value = false
            },()=>{
                showToast.value = false
                alert("哔咔娘被玩坏了，这绝对不是哔咔娘的错，绝对不是")
            })
        }

        function toFav() {
            router.push({path: '/main/fav'})
        }

        onMounted(() => {
            getProfile()
        })

        return {
            showToast,
            message,
            toFav
        }
    }
}
</script>

<style scoped>
.profile-container {
    width: 100%;
    height: auto;
    background-color: #e1e1e1;
}

.head-img-container {
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.head-img-box {
    width: 98%;
    height: 100%;
    background-image: linear-gradient(45deg, #ffb4c1, #de858c);
    display: flex;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
}

.head-img {
    border-style: solid;
    border-width: 4px;
    border-color: white;
    border-radius: 37px;
    width: 70px;
    height: 70px;
    background-color: #3B666B;
}

.server-slogn {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 幼圆;
}

.profile-msg-container {
    padding-bottom: 5px;
    padding-top: 5px;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-msg-box {
    width: 98%;
    height: auto;
    background-color: white;
    border-radius: 5px;
}

.profile-msg-line {
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.little-stick-plus {
    width: 100%;
    height: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.little-stick-plus div {
    width: calc(100% - 20px);
    background-color: #e1e1e1;
    height: 1px;
}
</style>